<template>
  <wd-popup
    custom-class="popup-custom"
    v-model="show"
    position="bottom"
    custom-style="border-radius:32rpx;"
    :close-on-click-modal="false"
  >
    <wd-card :title="materialType === 'A' ? '茶籽检测' : '茶果检测'">
      <wd-cell title="指标" value="实际结果" />
      <wd-cell-group>
        <wd-cell
          title="外观"
          label="果球干净且无干果、无异果或异籽。无污染无水浸痕迹。油茶籽呈黑色或褐色、有光泽、果仁白中带黄，呈现油亮。"
          title-width="130px"
          v-if="materialType === 'B'"
        >
          <wd-input v-model="qualityData.qualityLook" clearable></wd-input>
        </wd-cell>
        <wd-cell title="酸价" label="≤ 1mg/g" title-width="130px">
          <NumberInput v-model="qualityData.qualityAcid" :max-decimal-digits="2" :min="0" />
        </wd-cell>
        <wd-cell title="气味" label="无异味" title-width="130px" v-if="materialType === 'B'">
          <wd-input v-model="qualityData.qualitySmell" maxlength="200"></wd-input>
        </wd-cell>
        <wd-cell title="水份" label=" ≤ 10%" title-width="130px" v-if="materialType === 'A'">
          <NumberInput
            v-model="qualityData.qualityWater"
            :max-decimal-digits="2"
            :min="0"
            :max="100"
          ></NumberInput>
        </wd-cell>
        <wd-cell
          title="不完善率"
          label=" ≤ 2%(含虫吃率、未成熟率、霉变率)"
          title-width="130px"
          v-if="materialType === 'A'"
        >
          <NumberInput
            v-model="qualityData.qualityImperfectionRate"
            :max-decimal-digits="2"
            :min="0"
            :max="100"
          ></NumberInput>
        </wd-cell>
        <wd-cell
          title="不完善率"
          label="/(%)≤2%(霉变率≤1%)"
          title-width="130px"
          v-if="materialType === 'B'"
        >
          <NumberInput
            v-model="qualityData.qualityImperfectionRate"
            :max-decimal-digits="2"
            :min="0"
            :max="100"
          ></NumberInput>
        </wd-cell>
        <wd-cell title="杂质" label=" ≤ 2%" title-width="130px" v-if="materialType === 'A'">
          <NumberInput
            v-model="qualityData.qualityDirt"
            :max-decimal-digits="2"
            :min="0"
            :max="100"
          ></NumberInput>
        </wd-cell>
        <wd-cell title="杂质" label=" ≤ 0.4%" title-width="130px" v-if="materialType === 'B'">
          <NumberInput
            v-model="qualityData.qualityDirt"
            :max-decimal-digits="2"
            :min="0"
            :max="100"
          ></NumberInput>
        </wd-cell>
        <wd-cell title="含油率" label=" ≥ 28%" title-width="130px" v-if="materialType === 'A'">
          <NumberInput
            v-model="qualityData.qualityOilYield"
            :max-decimal-digits="2"
            :min="0"
            :max="100"
          ></NumberInput>
        </wd-cell>
        <wd-cell
          title="含油量"
          label="/(%, 干基>27%)"
          title-width="130px"
          v-if="materialType === 'B'"
        >
          <NumberInput
            v-model="qualityData.qualityOilYield"
            :max-decimal-digits="2"
            :min="0"
            :max="100"
          ></NumberInput>
        </wd-cell>
        <wd-cell title="出干籽率" label="≥ 20%" title-width="130px" v-if="materialType === 'B'">
          <NumberInput
            v-model="qualityData.qualitySeedRate"
            :max-decimal-digits="2"
            :min="0"
            :max="100"
          ></NumberInput>
        </wd-cell>
        <wd-cell title="结果" title-width="100px">
          <wd-radio-group v-model="qualityData.qualityResult" shape="button">
            <wd-radio value="0">合格</wd-radio>
            <wd-radio value="1">不合格</wd-radio>
          </wd-radio-group>
        </wd-cell>
      </wd-cell-group>
      <template #footer>
        <view class="quality-footer">
          <wd-button block type="info" @click="handleCancel">取消</wd-button>
          <wd-button block type="success" @click="handleConfirm">确认</wd-button>
        </view>
      </template>
    </wd-card>
  </wd-popup>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { debounce, max } from 'lodash'
import NumberInput from '@/components/NumberInput/NumberInput.vue'

const show = ref(false)
const isEdit = ref(false)
const materialType = ref('')
const qualityData = reactive({
  qualityAcid: '',
  qualityWater: '',
  qualityImperfectionRate: '',
  qualityDirt: '',
  qualityOilYield: '',
  qualitySeedRate: '',
  qualityResult: '',
})

const emit = defineEmits(['cancel', 'confirm'])

const open = (formData, edit = false, type = '') => {
  console.log(formData, edit, type)
  Object.assign(qualityData, formData || {})
  isEdit.value = edit
  materialType.value = type
  show.value = true
}

const handleCancel = debounce(
  () => {
    uni.showModal({
      title: '取消',
      content: '确认是否取消？',
      success: async function (res) {
        if (res.confirm) {
          show.value = false
          emit('cancel')
        }
      },
    })
  },
  1000,
  { leading: true, trailing: false },
)

const handleConfirm = debounce(
  () => {
    show.value = false
    emit('confirm', qualityData)
  },
  1000,
  { leading: true, trailing: false },
)

defineExpose({
  open,
})
</script>

<style scoped>
/* :deep(.popup-custom) {
  width: 90%;
} */
:deep(.wd-card__title) {
  text-align: center;
}
.quality-footer {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
}
</style>